<!--
 * @Author: your name
 * @Date: 2021-04-01 11:39:02
 * @LastEditTime: 2021-04-15 11:18:14
 * @LastEditors: your name
 * @Description: In User Settings Edit
 * @FilePath: \web\node\views\back\aside.html
-->
<!-- 侧边栏 -->
<div class="aside">
    <!-- 个人资料 -->
    <div id="asideProfile" class="profile">
        <!-- 头像 -->
        
    </div>
    <!-- 导航菜单 -->
    <div class="navs">
        <ul class="list-unstyled">
           
        </ul>
    </div>
</div>

<script src="js/jquery-1.7.2.min.js"></script>
<script>
    $(function(){
        //阴影数据注入
        let flag = sessionStorage.getItem("userSelectedTag") || "one";
        let tpl = `
        <li>
                <a tag="one" href="/back" class="${flag === 'one' ? 'active':''}">
                    <i class="fa fa-area-chart"></i>
                    首页数据
                </a>
            </li>
            <li>
                <a tag="two" href="/back/s_list" class="${flag === 'two' ? 'active':''}">
                    <i class="fa fa-calculator"></i>
                    轮播图管理
                </a>
            </li>
            <li>
                <a tag="three" href="/back/source_list" class="${flag === 'three' ? 'active':''}">
                    <i class="fa fa-users"></i>
                    幼教资源管理
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <i class="fa fa-object-group"></i>
                    用户管理
                    <i class="arrow fa fa-angle-right"></i>
                </a>
                <ul class="list-unstyled" style="display:block">
                    <li>
                        <a tag="fourOne" href="/back/u_center" class="${flag === 'fourOne' ? 'active':''}">
                            用户中心
                        </a>
                    </li>
                    <li>
                        <a tag="fourTwo" href="/back/u_set" class="${flag === 'fourTwo' ? 'active':''}">
                            用户信息
                        </a>
                    </li>
                </ul>
            </li>
        `;
        $(".list-unstyled").html(tpl)


        let token = localStorage.getItem("token");

        //发起请求
        $.ajax({
            url: "http://localhost:3000/back/user/aip/u_msg/" + token,
            type: "get",
            success: function (data) {
                if (data.status === 200) {
                    
                    //页面数据进行渲染
                    let tmp = `
                    <div class="avatar img-circle">
                        <img src="${data.result[0].icon_url ? '/uploads/' + data.result[0].icon_url : './uploads/avatar.png'}">
                    </div>
                    <h4>${data.result[0].real_name}</h4>
                    `
                    $("#asideProfile").html(tmp)


                } else {
                    alert('数据请求失败!');
                }
            }
        }); 


        // 2. 处理点击选中
        $('a').on('click', function () {
            sessionStorage.setItem('userSelectedTag',  $(this).attr('tag'));
        });
    })
</script>